<template>
  <section class="case">
    <img class="img" src="@/assets/images/case/banner.jpg" lazy-load />
    <ul class="case-tab">
      <li
        :class="{ active: activeIndex == index }"
        v-for="(item, index) in tab"
        :key="index"
        @click="switchActive(item, index)"
      >{{ item.label }}</li>
    </ul>
    <section class="case-content">
      <component :is="activeName" keep-alive />
    </section>
  </section>
</template>

<script setup lang="ts">
import control from './components/control.vue'
import comeOut from './components/comeOut.vue'
import verify from './components/verify.vue'
import visit from './components/visit.vue'
import { ref, reactive, markRaw } from 'vue'
let activeIndex = ref(0)
let activeName = ref(markRaw(control))
const tab = reactive([
  {
    label: '管控案例',
    key: markRaw(control),
  },
  {
    label: '出入案例',
    key: markRaw(comeOut),
  },
  {
    label: '验证案例',
    key: markRaw(verify),
  },
  {
    label: '访问案例',
    key: markRaw(visit),
  },
])
const switchActive = (item: any, index: number) => {
  activeIndex.value = index
  activeName.value = item.key
  const a = document.querySelector('.img')
  if (a != null) {
    const heightTop = a.clientHeight
    window.scrollTo({
      top: heightTop,
      behavior: 'smooth',
    })
  }
}
</script>

<style lang="scss" scoped>
.case {
  &-tab {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 90px;
    font-size: 32px;
    color: #686868;
    background-color: #daeeff;
    position: sticky;
    top: 110px;
    z-index: 2;
    li {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 100%;
      &.active {
        color: #333333;
        border-bottom: 4px solid #2087e3;
      }
    }
  }
  &-content {
    padding: 0 24px;
    margin-bottom: 160px;
  }
}
</style>